<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML及CSS模拟报纸排版</title>
    <style>
		* {
			margin: 0;padding: 0;
		}
		ul {
			list-style: none;
		}
		body {
			background: #666;
		}
		#wrap {
			margin: 0 auto;
			width: 980px;
			height: 1386px;
			padding: 0 44px;
			background-color: #fff;
		}
		header {
			width: 100%;
			height: 61px;
			border-bottom: 2px solid #938e8c;
			margin-bottom: 40px;
		}
		nav .logo {
			float: left;
			width: 111px;
			height: 61px;
			background: url(images/logo.gif) no-repeat;
		}
		nav .date {
			float: right;
			font-size: 12px;
			color: #d45d5c;
			font-family: "黑体";
			padding-top: 49px;
		}
		.cont_top .t_left {
			float: left;
		}
		.cont_top .t_left img {
			display: block;
			width: 641px;
			height: 301px;
		}
		.cont_top .t_right {
			float: right;
			width: 203px;
			height: 299px;
			border-top: 2px solid #cc8091;
			padding-top: 5px;
			overflow: hidden;
		}
		.t_right .r_tit {
			display: inline-block;
			font-size: 24px;
			color: #000;
			font-family: "微软雅黑";
			line-height: 40px;
			border-bottom: 1px solid #000;
		}
		.t_right .r_tit:first-letter {
			font-size: 30px;
			font-weight: bold;
		}
		.t_right .r_con {
			font-size: 12px;
			color: #676767;
			font-family: "楷体";
			line-height: 10px;
		}
		.t_right .r_num {
			width: 116px;
			color: #75b86b;
			font-family: "微软雅黑";
			font-size: 100px;
			font-style: italic;
		}
		.r_desc {
			width: 203px;
			height: 55px;
			overflow: hidden;
		}
		.r_desc .sp-01 {
			float: left;
			font-size: 55px;
			color: #cc8091;
			font-family: "微软雅黑";
			line-height: 58px;
		}
		.r_desc div {
			padding-top: 12px;
		}
		.p-02 {
			font-size: 21px;
			line-height: 21px;
			color: #cc8901;
			font-family: "微软雅黑";
		}
		.p-03 {
			font-size: 12px;
			line-height: 8px;
			color: #cc8901;
			font-family: "微软雅黑";
		}
		/* cont_mid 部分*/
		.cont_middle {
			width: 640px;
			margin-top: 20px;
			overflow: hidden;
			padding-top: 20px;
		}
		.cont_middle .m_l {
			float: left;
			width: 30%;
			margin-right: 3%;
		}
		.m_l .m_tit {
			display: inline;
			font-size: 16px;
			text-decoration: underline;
			font-family: "微软雅黑";
			line-height: 30px;
		}
		.m_wrap .m_l:nth-child(1) .m_tit {
			color: #418c59;
		}
		.m_wrap .m_l:nth-child(2) .m_tit {
			color: #d2994f;
		}
		.m_wrap .m_l:nth-child(3) .m_tit {
			color: #cc7680;
		}
		.m_wrap .m_l:nth-child(1) .m_cont {
			color: #767777;
			font-family: "宋体";
			line-height: 16px;
			font-size: 12px;
		}
		.m_wrap .m_l:nth-child(2) .m_cont {
			color: #231815;
			font-family: "微软雅黑";
			font-size: 12px;
			line-height: 16px;
			opacity: 0.7;

		}
		.m_wrap .m_l:nth-child(3) .m_cont {
			font-size: 12px;
			line-height: 20px;
			font-family: "微软雅黑";
		}
		.m_list {
			margin-top: 20px;
		}
		.m_list  span{
			font-size: 12px;
			color: #cd4a48;
			font-family: "微软雅黑";
			line-height: 16px;
			opacity: 0.7;
			font-style: italic;
		}
		/* cont-bottom */
		.cont_bottom {
			margin-top: 50px;
		}
		.bot_l {
			width: 415px;
			float: left;
			margin-right: 19px;
		}
		.bot_l .sideleft_t {
			border-bottom: 2px solid #11456b;
		}
		.sideleft_t span {
			font-size: 72px;
			color: #f5e327;
			font-family: "黑体";
			float: left;
			font-weight: bold;
			font-style: italic;
			margin-right: 20px;
			margin-top: -10px;
		}
		.sideleft_t p:first-child {
			
			font-size: 42px;
			color: #11456b;
			font-family: "黑体";
			font-weight: 600;
			line-height: 40px;
		}
		.sideleft_t p:last-child {
			font-size: 33px;
			line-height: 50px;
			color: #11456b;
		}
		.sideleft_b span {
			float: left;
			font-size: 70px;
			color: #f5e327;
			font-family: "微软雅黑";
			margin-right: 9px;
		}
		.sideleft_b p {
			text-indent: 2em;
			font-size: 12px;
			color: #767777;
			font-family: "宋体";
			line-height: 16px;
		}
		.sideleft_b .img {
			float: right;
			padding-left: 10px;
			padding-right: 5px;
			clear: both;
		}
		.bot_right {
			width: 458px;
			float: left;
		}
		.r_img {
			width: 458px;
			height: 275px;
			margin-bottom: 30px;
		}
		.bot_right .news {
			width: 459px;
			height: 318px;
			background-color: #eeeed6;
			padding-top: 20px;
		}
		.news .list {
			margin-left: 15px;
			list-style: none;
			padding-left: 10px;
			background: url(images/arrow.gif) no-repeat left 13px;
		}
		.news .list li {
			font-size: 16px;
			color: #5a5b5b;
			font-family: "宋体";
			line-height: 36px;
		}
		.news .list li i {
			font-size: 12px;
			color: #5a5b5b;
			font-family: "宋体";
			font-style: italic;
			text-align: right;
		}
		.new_cont {
			overflow: hidden;
			margin-top: 44px;
		}
		.new_cont .new_date {
			width: 260px;
			height: 160px;
			background-color: #d45d5c;
			float: left;
		}
		.new_date span {
			font-size: 110px;
			color: #ffffff;
			font-family: "微软雅黑";
			float: left;
		}
		.new_date .r_text {
			width: 170px;
			float: left;
			border-left: 2px solid #fff;
			padding: 5px 5px 5px 8px;
			margin-top: 32px;
		}
		.new_date .r_text p {
			font-size: 21px;
			color: #fff;
			font-style: italic;
			font-family: "黑体";
			line-height: 24px;
		}
		.new_date .r_text p:last-child {
			font-size: 12px;
			font-family: "黑体";
			line-height: 12px;
			font-style: normal;
		}
		.new_cont .new_text {
			width: 175px;
			float: right;
		}
		.new_text p {
			text-indent: 5em;
			font-size: 14px;
			color: #5a5b5b;
			font-family: "黑体";
			font-style: italic;
			line-height: 30px;
		}
		.new_text {
			position: relative;
		}
		.dou {
			position: absolute;
			top: -10px;
			left: -22px;
			font-size: 72px;
			font-family: "黑体";
			color: #d45d5c;
		}
		.dou:last-child {
			top: 115px;
			left: 125px;
		}
		footer {
			margin-top: 30px;
			width: 892px;
			height: 60px;
			border-top: 1px solid #938e8c;
			text-align: right;
			color: #d45d5c;
			font-family: "黑体";
			font-size: 12px;
		}
    </style>
</head>
<body>
	<div id="wrap">
		<header>
			<nav>
				<p class="logo"></p>
				<p class="date">2017.03</p>
			</nav>
		</header><!--头部结束-->

		<section>
			<div class="cont_top">
				<div class="t_left">
					<img src="images/banner.gif" alt="banner">
				</div>	
				<div class="t_right">
					<p class="r_tit">ABOUT</p>
					<p class="r_tit">TECHNOLOGE</p>
					<p class="r_con">about technologe,about technologe,about technologe,about</p>
					<p class="r_num">700</p>
					<div class="r_desc">
						<span class="sp-01">3.2</span>
						<div>
							<p class="p-02">CSS</p>
							<p class="p-03">css css css css css css css</p>
						</div>
					</div>
				</div>
			</div><!--top 结束-->
			<div class="cont_middle">
				<div class="m_wrap">
					<div class="m_l">
						<p class="m_tit">
							What
						</p>
						<p class="m_cont">
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
					</div>
					<div class="m_l">
						<p class="m_tit">
							When
						</p>
						<p class="m_cont">
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
					</div>
					<div class="m_l">
						<p class="m_tit">
							How
						</p>
						<p class="m_cont">
							前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
						</p>
						<ul class="m_list">
							<li>What-------<span>40%</span></li>
							<li>What-------<span>40%</span></li>
							<li>What-------<span>40%</span></li>
						</ul>
					</div>
				</div>
			</div><!--middle 结束-->
			<div class="cont_bottom">
				<div class="bot_l">
					<div class="sideleft_t">
						<p><span>THE</span>TECHNOLOGE OF FRONT</p>
						<p>前端技术领域</p>
					</div>
					<div class="sideleft_b">
						<span>前</span><p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端.</p>
						<div class="img">
							<img src="images/ad2.gif" alt="">
						</div>
						<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端.</p>						
						<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端.</p>						
					</div>
				</div>
				<div class="bot_right">
					<div class="r_img">
						<img src="images/ads.gif" alt="广告图">
					</div>
					<div class="news">
						<ul class="list">
							<li>前端前端前端前端前端..............................<i>百度</i></li>
							<li>前端前端前端前端前端..............................<i>谷歌</i></li>
							<li>前端前端前端前端前端..............................<i>慕课</i></li>
						</ul>
						<div class="new_cont">
							<div class="new_date">
								<span>0</span>
								<div class="r_text">
									<p>ONE TWO</p>
									<p>THREE FORE FIVE</p>
									<p>HELLO world HELLO worldHELLO worldHELLO world</p>
								</div>
							</div>
							<div class="new_text">
								<span class="dou">“</span>
								<p>hello world hello world hello world hello world hello world hello world hello world <i>”</i></p>
								<span class="dou">”</span>
							</div>
						</div>
					</div>
				</div>
			</div><!--bottom 结束-->
		</section> <!--main部分结束-->
		<div style="clear: both;"></div>
		<footer>
			ife.baidu.com
		</footer><!--底部结束-->
	</div><!--wrap 结束-->
</body>
<script>
    
    
</script>
</html>